<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0 user-scalable=none, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <title>黑马面面</title>
</head>

<body>
    <nav class="nav">
        <ul class="nav_iteams">
            <li>
                <a href="#">
                    <img src="images/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon2.png" alt="">
                    <span>笔试</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon3.png" alt="">
                    <span>技术面试</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon4.png" alt="">
                    <span>模拟面试</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon5.png" alt="">
                    <span>面试技巧<span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon6.png" alt="">
                    <span>薪资查询</span>
                </a>
            </li>
        </ul>
        <div class="main_pic">
            <a href="">
                <img src="upload/go.png" alt="">
            </a>
        </div>
    </nav>
    <section class="main">
        <div class="main_hd">
            <h4><img src="images/i2.png" alt="">就业指导</h4>
            <a href="" class="more">更多</a>
        </div>
        <div class="main_bd">
            <div class="swiper-container jiuye">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll1.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll2.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll3.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll4.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                        </a>
                    </div>
                </div>
                <!-- Add Pagination -->
                <!-- <div class="swiper-pagination"></div> -->
            </div>
            <div class="swiper-button-next color_black"></div>
            <div class="swiper-button-prev color_black"></div>
    </section>
    <section class="main">
        <div class="main_hd">
            <h4><img src="images/i2.png" alt="">充电学习</h4>
            <a href="" class="more">更多</a>
        </div>
        <div class="main_bd">
            <div class="swiper-container chongdian">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                            <span>16500人正在学习</span>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll1.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                            <span>16500人正在学习</span>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll2.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                            <span>16500人正在学习</span>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll3.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                            <span>16500人正在学习</span>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="upload/wll4.jpg" alt="">
                            <p>吴乐乐教你面试技巧</p>
                            <span>16500人正在学习</span>
                        </a>
                    </div>
                </div>
            </div>
    </section>
    <script>
        var swiper = new Swiper('.jiuye', {
            slidesPerView: 2,
            spaceBetween: 0,
            centeredSlides: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        var swiper = new Swiper('.chongdian', {
            slidesPerView: 2.2,
            spaceBetween: 30,
            freeMode: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    </script>
</body>

</html>